<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客家博物馆</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="wap-font-scale" content="no" />
    <link rel="stylesheet" type="text/css" href="/css/public.css" />
    <link rel="stylesheet" type="text/css" href="/css/course.css" />
<!--    <link rel="stylesheet" type="text/css" href="footer.css">-->
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/iscroll.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script type="text/javascript" src="/js/template-native.js"></script>
    <script type="text/javascript" src="/hakka/index.js"></script>
    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="/js/FileSaver.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $(".menu_box li:eq(7)").addClass("choose_menu");
            $(".mobile_menu_title").text("客家博物馆");
        });
        var index = 1;
        function previous(){
            if(index==1){
                alert("已经是第一个了");
                return;
            }
            index=((index-1)%52);
            document.getElementById('questionAudio').src="/minio/download?fileName=/mp3/"+ index+".mp3";
            document.getElementById('qid').innerText = "当前题号："+index;
        }
        function next(){
            index=((index+1)%52);
            if(index%10==0){
                alert("你已经完成10道题");
            }
            document.getElementById('questionAudio').src="/minio/download?fileName=/mp3/"+ index+".mp3";
            document.getElementById('qid').innerText = "当前题号："+index;
        }
        function CommitTo() {
            if ($("#content01").val()==""){
                alert("请输入你听到的内容");
                return;
            }
            var AAnswer={
                mp3Id:$("#questionAudio").attr("src"),
                userAnswer:$("#content01").val()
            };
            console.log(AAnswer);
            $.ajax({            //几个参数需要注意一下
                type: "POST",//提交数据的方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/users/commit" ,//后台接收参数的文件地址
                contentType: "application/json",
                data:JSON.stringify(AAnswer),
                success: function (result) {
                    alert(result);
                    // console.log(result);//打印服务端返回的数据(调试用)
                    // if (result.resultCode == 200) {
                    //     alert("SUCCESS");
                    // }
                    $("#content01").val("");
                    //  localStorage.setItem()
                    // localStorage.getItem()
                },
                error : function() {
                    alert("请先登录！");
                }
            });
        }

        function download01() {
            $.ajax({            //几个参数需要注意一下
                type: "GET",//提交数据的方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "/users/SelectAll" ,//后台接收参数的文件地址
                contentType: "application/json",
                success: function (result) {
                    const blob = new Blob(['\ufeff'+result], {type: "text/csv;charset=UTF-8"})
                    //const blob = new Blob([data], {type: 'audio/wav'})
                    const a= document.createElement("a")
                    a.href = URL.createObjectURL(blob)
                    a.download = "fileName" // 这里填保存成的文件名
                    a.click()
                    URL.revokeObjectURL(a.href)
                    a.remove();
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>


</head>
<style>
    .main {
        position: relative;
        /* background-color: burlywood; */
        height: 45vh;
    }
    h1 {
        text-align: center;
        color: #858585;
        background-color: white;
    }
    .select {
        text-align: center;
        /* background-color: blue; */
    }
    #questionAudio {
        margin-top: 10px;
    }
    .btn {
        width: 100px;
        height: 30px;
        margin: 10px 25px;
        border-radius: 20px;

    }
    .answer {
        /* background-color: brown; */
        text-align: center;
        line-height: 100px;
    }
    .contentkkk {
        width: 200px;
        height: 40px;
    }
    #submit {
        width: 100px;
        height: 45px;
    }
    .download {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100px;
        height: 50px;
        font-weight: 900;
        background-color: #858585;
    }
    .tocomment{
        text-align: center;
        line-height: 50px;
        position: absolute;
        right: 0;
        bottom: 60px;
        width: 100px;
        height: 50px;
        font-weight: 900;
        background-color: #858585;
    }
    .footer{
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 60px;
        background-color: #eeee;
        z-index: 9999;
        /*background-image: url("static/image/footer/footer.png");*/
        /*background:url(image/footer/footer.png) no-repeat 50% 50%;*/
    }
</style>
<!-- <script>
        function previous(){
            document.getElementById('previoustAudio').src="../2.mp3";
        }
</script> -->
<body>
<!--页头 开始-->
<div th:include="common/head :: top" class="head"></div>
<!--页头结束-->
    <h1>客家博物馆音译问卷调查</h1>
    <!-- 需要装插件的方法 -->
    <!-- <embed height="100" width="100" src="/i/horse.mp3"></embed> -->
    <!-- <audio controls="controls" height="100" width="100">
        <source src="song.mp3" type="audio/mp3" />
        <source src="song.ogg" type="audio/ogg" />
    </audio> -->

    <div class="banner">
        <img style="width: 100%;height: 250px;" src="/image/search/background.jpg" alt="">
    </div>
    <div class="main">
        <h1 id="qid" align="center"></h1>
        <div class="select">
            <audio controls="controls" src="/minio/download?fileName=/mp3/1.mp3" loop="loop" id="questionAudio"></audio>
            <div class="or">
                <button class="btn" onclick="previous()">上一个音频</button>
                <button class="btn" onclick="next()">下一个音频</button>
            </div>
        </div>
        <div class="answer">
            <input id="content01" type="text" class="contentkkk" placeholder="请填写您听到的内容">
            <button id="submit" onclick="CommitTo()">提交</button>
        </div>
<!--        <button class="download" ><a href="/log/downApp/user_answers.xls">下载</a></button>-->
        <button class="download" onclick="download01()">下载数据</a></button>
        <a class="tocomment" href="/comment">查看提交</a>

    </div>


<!--相对底部footer-->




<!--<link rel="stylesheet" type="text/css" href="/css/footer.css" />-->
<!--合作单位：梅州市客家博物馆-->
<!--    <div id="footer" style="text-align: center">-->
<!--        <img th:src="@{/image/footer/footer.png}"/>-->
<!--    </div>-->
<!--<link rel="stylesheet" type="text/css" href="footer.css">-->
<!---->
<!--<div class="footer" style="text-align: center">-->
<!--    <img th:src="@{/image/footer/11.png}"/>-->
<!--</div>-->
</body>
</html>
